<template>
  <div id="life" :style="{backgroundColor: '#' + color}">
    <div class="left">
      <div class="title"><span>偶像</span></div>
      <div>
        <div class="item">
          <div class="lj"><img src="https://wx4.sinaimg.cn/large/67f95e4fly1fktldt4vtej218g0txwm0.jpg" alt="李健" @click="ljClick"></div>
          <div class="hg"><img src="https://ww4.sinaimg.cn/large/48e837eegw1f4u7kmets8j20np0zk76s.jpg" alt="胡歌" @click="hgClick"></div>
        </div>
        <div class="item">
          <div class="zx"><img src="https://wx4.sinaimg.cn/large/005HP8IYgy1g82unhhcyej33gg56o7wl.jpg" alt="张昕" @click="zxClick"></div>
          <div class="xyyz"><img src="https://wx3.sinaimg.cn/large/005HOofily1g9yq4nqvgjj32ac2achdt.jpg" alt="许杨玉琢" @click="xyyzClick"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title"><span>游戏</span></div>
      <div>
        <div class="item">
          <div class="yxlm"><img src="https://wx3.sinaimg.cn/large/006f8wK2gy1ge0d09ys3dj31hc0u04qp.jpg" alt="英雄联盟" @click="yxlmClick"></div>
          <div class="wzry"><img src="https://wx4.sinaimg.cn/large/006dCke7gy1gej0w1yi3cj31my0u04qt.jpg" alt="王者荣耀" @click="wzryClick"></div>
        </div>
        <div class="item">
          <div class="cjzc"><img src="https://wx2.sinaimg.cn/large/006ZTA5ngy1g060f2f9ahj30p00angt0.jpg" alt="张昕" @click="cjzcClick"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
import 'element-ui/lib/theme-chalk/index.css'

export default {
  name: '',
  data() {
    return {
      color: 'fff',
      colorday: 'fff',
      colornight: '666',
    };
  },
  computed:{
  },
  watch:{
  },
  methods: {
    ljClick() {
      window.open('https://weibo.com/musiclijian')
    },
    hgClick() {
      window.open('https://weibo.com/hu_ge')
    },
    zxClick() {
      window.open('https://weibo.com/u/5228234876')
    },
    xyyzClick() {
      window.open('https://weibo.com/u/5228056212')
    },
    yxlmClick() {
      window.open('https://weibo.com/lol')
    },
    wzryClick() {
      window.open('https://weibo.com/heromoba')
    },
    cjzcClick() {
      window.open('https://weibo.com/u/6411400245')
    }
  },
  computed:{
    nightData() {
      return this.$store.state.isNight
    }
  },
  watch:{
    nightData(newData, oldData) {
      if(newData){
        this.color = this.colorday
      } else {
        this.color = this.colornight
      }
    }
  }
};
</script>

<style scoped>
#life {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left, .right {
  flex: 50%;
  padding: 100px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
}
.title {
  margin-bottom: 20px;
}
.item {
  display: flex;
}
.lj img {
  width: 500px;
  height: auto;
  margin-right: 8px;
  cursor: pointer;
}
.hg img {
  width: auto;
  height: 336px;
  cursor: pointer;
}
.zx img {
  width: auto;
  height: 435px;
  margin-right: 8px;
  cursor: pointer;
}
.xyyz img {
  width: 435px;
  height: auto;
  cursor: pointer;
}
.right {
  flex: 50%;
  padding: 100px;
}
.yxlm img {
  width: 400px;
  height: auto;
  margin-right: 8px;
  cursor: pointer;
}
.wzry img {
  width: auto;
  height: 225px;
  cursor: pointer;
}
.cjzc img {
  width: 850px;
  height: auto;
  cursor: pointer;
}
</style>
